<template>
  <div>
    <div class="card">
      <div class="card_title">条件</div>
      <div class="card_form">
        <el-form label-position="right" label-width="80px">
          <el-form-item label="日期范围">
            <el-date-picker
              v-model="data_picker"
              type="daterange"
              align="right"
              unlink-panels
              size="small"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              style="margin-right: 10px"
            />
            <el-checkbox
              v-model="checkAll"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
            >全选</el-checkbox>
            <el-checkbox-group
              v-model="checkedCities"
              style="display: inline-block; margin-left: 20px"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox v-for="city in cities" :key="city" :label="city">{{
                city
              }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="房型选择">
            <el-checkbox
              v-model="checkAll1"
              :indeterminate="isIndeterminate1"
              @change="handleCheckAllChange1"
            >全选</el-checkbox>
            <el-checkbox-group
              v-model="checkedCities1"
              style="display: inline-block; margin-left: 20px"
              @change="handleCheckedCitiesChange1"
            >
              <el-checkbox v-for="city in cities1" :key="city" :label="city">{{
                city
              }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="房态">
            <el-radio-group v-model="radio" @input="radioChange">
              <el-radio :label="0">无房</el-radio>
              <el-radio :label="1">有房</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              @click="showPriceListFn"
            >生成价格表</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="card">
      <div class="card_title">价格表</div>
      <div v-if="showPriceList">
        <div v-if="checkboxShow" style="padding: 20px">
          <el-table :data="tableData" border>
            <el-table-column prop="test" label="房型" width="450" />
            <el-table-column label="前台价" width="300">
              <template slot-scope="{ row }">
                <el-input v-model="row.qt_Money" type="text" />
              </template>
            </el-table-column>
            <el-table-column label="优惠价" width="300">
              <template slot-scope="{ row }">
                <el-input v-model="row.yh_Money" type="text" />
              </template>
            </el-table-column>
            <el-table-column label="会员价">
              <template slot-scope="{ row }">
                <el-input v-model="row.vip_Money" type="text" />
              </template>
            </el-table-column>
          </el-table>
          <div class="card_footer">
            <div class="card_footer_left" />
            <div class="card_footer_right">
              <el-button
                type="primary"
                style="margin-left: 20px"
              >提交价格表</el-button>
            </div>
          </div>
        </div>
        <div v-else style="padding: 20px">正在加载...</div>
      </div>
    </div>
  </div>
</template>

<script>
const cityOptions = ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
const cityOptions1 = ['12[含早]', '13[含早]']
export default {
  data() {
    return {
      // 显示隐藏价格表表格
      showPriceList: false,
      checkboxShow: null,
      // 单选
      radio: undefined,
      // 全选一
      checkAll: false,
      checkedCities: ['周一', '周二', '周三', '周四', '周五', '周六', '周天'],
      cities: cityOptions,
      isIndeterminate: true,
      // 全选二
      checkAll1: false,
      checkedCities1: ['12[含早]', '13[含早]'],
      cities1: cityOptions1,
      isIndeterminate1: true,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      data_picker: '',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }
      ]
    }
  },
  mounted() {
    console.log(this.tableData)
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length
    },
    handleCheckAllChange1(val) {
      this.checkedCities1 = val ? cityOptions1 : []
      this.isIndeterminate1 = false
    },
    handleCheckedCitiesChange1(value) {
      const checkedCount = value.length
      this.checkAll1 = checkedCount === this.cities1.length
      this.isIndeterminate1 =
        checkedCount > 0 && checkedCount < this.cities1.length
    },
    radioChange(e) {
      console.log(e)
    },
    // 显示隐藏价格表表格
    showPriceListFn() {
      this.showPriceList = true
      this.tableData = this.checkedCities1.map((item, index) => {
        return {
          ...this.tableData[index],
          test: item,
          qt_Money: 23,
          yh_Money: 12,
          vip_Money: null
        }
      })
      if (this.checkedCities1.length > 0) {
        this.checkboxShow = true
      } else {
        this.checkboxShow = false
      }
    }
  }
}
</script>

<style>
.card {
  border-radius: 6px;
  margin: 30px;
  height: auto !important;
  padding-bottom: 40px;
  border: 1px solid rgb(188, 232, 241);
  background-color: #fff;
}
.card_title {
  height: 50px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  line-height: 50px;
  text-indent: 20px;
  background-color: rgb(217, 237, 247);
}
.card_form {
  padding: 15px 50px;
}
.card_footer {
  border: 1px solid rgb(235, 238, 245);
  display: flex;
}
.card_footer_left {
  width: 450px;
  border-right: 1px solid rgb(235, 238, 245);
}
.card_footer_right {
  padding: 10px 0;
  flex: 1;
}
</style>
